import React from 'react';
import { Layout,Button ,Radio} from 'antd';
import { DownloadOutlined } from '@ant-design/icons';
const { Header, Footer, Sider, Content } = Layout;
import {TopCard} from '../../component/TopCard';
import styles from './discuss.module.less';
import {Link } from 'react-router-dom';
// import {Search} from '../../component/search'
import {Rank,Topic,Message} from './component';
import { Tag } from 'antd';


export const Discuss = () => {
    // ,"意见反馈"
const cardName = [
    {name:"求职面试",imgUrl:"https://static.leetcode-cn.com/cn-mono-assets/production/assets/interview-active.ebee91f1.png"},
    {name:"职场内推",imgUrl:"https://static.leetcode-cn.com/cn-mono-assets/production/assets/jobs-promote.04e3a3ef.png"},
    {name:"技术交流",imgUrl:"https://static.leetcode-cn.com/cn-mono-assets/production/assets/general-topic.66326b21.png"},
    {name:"文章分享",imgUrl:"https://static.leetcode-cn.com/cn-mono-assets/production/assets/notes.0e1effb1.png"},
];
    return (
        <Layout style={{margin:"0 auto"}}>
           <Layout>
            <Content> 
                <div className={styles['box']}>
                    {cardName.map((item,index) =>(
                        <TopCard name={item.name} key={index} imgUrl={item.imgUrl}></TopCard>
                    ))}
                </div>
                <div className={styles['toplist']}>
                    <div className={styles['tagList']}>
                        <div className={styles['tag']}>最热</div>
                        <div className={styles['tag']}>最新</div>
                        <div className={styles['tag']}>推荐</div>
                    </div>
                    <div className={styles['right']}>
                        {/* <Search ></Search> */}
                        <Button type="primary" size="middle" shape="round" style={{marginLeft:"10px",marginRight:'20px',backgroundColr:"blue"}}>发起讨论</Button>
                    </div>
                </div>
                <div className={styles['tags']}>
                <Tag color="#eaecef" style={{color:"#55acee"}}>算法集训营第二期</Tag>
                <Tag color="#eaecef" style={{color:"#55acee"}}>面试题</Tag>
                <Tag color="#eaecef"  style={{color:"#55acee"}}>程序员故事</Tag>
                <Tag color="#eaecef" style={{color:"#55acee"}}>求职日记</Tag>
                <Tag color="#eaecef" style={{color:"#55acee"}}>面试经验</Tag>
                <Tag color="#eaecef" style={{color:"#55acee"}}>求职求助</Tag>
                <Tag color="#eaecef" style={{color:"#55acee"}}>Java</Tag>
                <Tag color="#eaecef" style={{color:"#55acee"}}>C++</Tag>
                </div>
                <Message></Message>
                <Message></Message>
                <Message></Message>
                <Message></Message>
                <Message></Message>
                <Message></Message>
                <Message></Message>
            </Content>
            <Sider style={{backgroundColor:'#eff0f2',width:"1000px"}}>
               <div className={styles['loginBox']}>
                    <div className={styles['box_pwd']}>
                        <div className={styles['text']}>力扣中文社区</div>
                        <div className={styles['login']}>登录已有账号</div>
                    </div>
                    {/* <Button type="primary" size="middle" style={{margin:"20px 5px"}}>立即注册</Button> */}
                    <div className={styles['loginBox_button']}>立即注册</div>
                </div> 
               <Rank></Rank> 
               <Topic>
               </Topic>
            </Sider>
           </Layout>
           <Footer></Footer>
        </Layout>     
    )
}
